<template>
	<view class='page_cont'>
		<view class='set_list'>
			<view class='set_item' @click="nav_replace()">
				<view class='title'>手机号</view>
				<view class='text'>{{mob}}</view>
				<image class='icon' src="/static/icon43.png"></image>
			</view>
			<view class='set_item'>
				<view class='title'>绑定微信</view>
				<view class='text' style='color:#5B90FF;' @click="open_pop()" v-if='bind'>解绑</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo" v-else>未绑定</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="btn" @click="bind_weixin()" v-else>未绑定</view>
				<!-- #endif -->
				<image class='icon' src="/static/icon43.png"></image>
			</view>
			<view class='set_item' @click="nav_setPassword()">
				<view class='title'>密码设置</view>
				<view class='text' style='color:#5B90FF;'>设置</view>
				<image class='icon' src="/static/icon43.png"></image>
			</view>
			<!-- <view class='set_item' @click="nav_bind()">
				<view class='title'>身份绑定</view>
				<view class='text' style='color:#5B90FF;'></view>
				<image class='icon' src="/static/icon43.png"></image>
			</view> -->
		</view>
		<view class='off_btn' @click="show_out=true">退出登录</view>
		<view class='mask'  @touchmove.stop.prevent="moveHandle" v-show="show_pop"></view>
		<view class="page_con" :class="show_pop?'active':''">
			<view class='close_wrap' @click="close_pop()"><image src='/static/icon6.png' class='icon'></image></view>
			<view class='page'>
				<view class='title'>解除绑定后,继续使用此微信登录将无法查看和使用当前账号内容</view>
				<view class="confirm_btn" @click="user_unbind_wx()">确定</view>
				<view class="cancel_btn" @click="close_pop()">取消</view>
			</view> 
		</view>
		<view class="mask" @touchmove.stop.prevent="moveHandle" v-show="show_out">
			<view class='pop'>
				<view class='point'>确定退出此账号</view>
				<view class='btn_wrap_confirm'>
					<view class='btn' @click="show_out = false">取消</view>
					<view class='btn' @click="confirm_del()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../api/config.js"
	import api from "../../api/api.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return{
				mob: '',
				mobile: '',
				bind: false,
				show_pop: false,
				show_out:false,
				userinfo: '',
				openId: '',
				type: 1
			}
		},
		onLoad() {
			this.openId=uni.getStorageSync("openId")
		},
		onShow() {
			var that=this,userinfo=uni.getStorageSync("userinfo");
			that.mob=userinfo.phone?userinfo.phone.replace(userinfo.phone.substring(3,7), "****"):'';
			that.mobile=userinfo.phone?userinfo.phone:'';
			that.userinfo=userinfo;
			// #ifdef MP-WEIXIN||APP-PLUS
			if(that.userinfo.wxId){
				this.is_bind_wx();
			}
			// #endif
		},
		methods:{
			// 更换电话
			nav_replace(){
			    uni.navigateTo({
					url: '../replaceMobile/replaceMobile',
			    })
			},
			// 设置密码
			nav_setPassword(){
			    uni.navigateTo({
					url: '../setPassword/setPassword',
			    })
			},
			// 确认退出此账号
			confirm_del(){
				this.out_login();
			},
			// 解绑弹窗
			open_pop(){
				this.show_pop=true;
			},
			// 确定解绑
			user_unbind_wx(){
				this.unbind_wx();
			},
			// 关闭
			close_pop(){
				this.show_pop=false;
			},
			// 身份
			nav_bind(){
				uni.navigateTo({
					url: '/pages/bindUnit/bindUnit'
				})
			},
			// 微信授权-绑定微信
			getUserInfo(e){
			    // console.log(e)
			    if(e.detail.errMsg=='getUserInfo:ok'){
			      this.userinfo_decrypt_wx(e.detail)
			    }else{
			      util.page_show_toast('绑定失败',1500)
			    }
			},
			// 微信授权
			bind_weixin(){
				var that=this;
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
						// console.log(loginRes.authResult);
						var info=loginRes.authResult;
						that.openId=info.openid
						that.unionId=info.unionid
						info.openId=info.openid
						info.unionId=info.unionid
						uni.setStorageSync("openId",info.openId)
						uni.setStorageSync("unionId",info)
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function (infoRes) {
								// console.log(infoRes);
								// 绑定微信
								that.wx_bind(infoRes.userInfo)
							}
						})
					}
				})
			},
			// 解绑微信
			unbind_wx(){
				var params={
					"unionId": this.userinfo.wxId,
					"openId": this.openId,
					"bindType": "1",
					"thirdAppId": api.data.appId
				};
				config.unbind_wx(params).then(res=>{
					this.close_pop();
					this.bind=false;
					util.page_show_toast('解绑成功',1500);
					if(uni.getStorageSync('unionId')){
						uni.removeStorageSync("unionId")
						uni.removeStorageSync('token')
						uni.removeStorageSync('userinfo')
						uni.removeStorageSync("identityNum")
						uni.removeStorageSync("userIdentity")
						setTimeout(()=>{
							uni.redirectTo({
								url: '/pages/login/login'
							})
						},1500)
					}
				})
			},
			// 是否绑定微信
			is_bind_wx(){
				var params={
					"unionId": this.userinfo.wxId,
					"openId": this.openId,
					"bindType": "1",
					"thirdAppId": api.data.appId
				};
				config.is_bind_wx(params).then(res=>{
					// console.log(res)
					var bind=res.data.data;
					this.bind=bind;
				})
			},
			// unionId解密
			userinfo_decrypt_wx(info){
			    var params={
					"openId": this.openId,
					"encryptedData": info.encryptedData,
					"iv": info.iv
			    }
			    config.decrypt_wx(params).then(res=>{
					// console.log(res)
					var info=res.data.data;
					uni.setStorageSync("unionId",info)
					this.unionId=info.unionId;
					this.userinfo.wxId=info.unionId;
					uni.setStorageSync("userinfo",this.userinfo)
					// 绑定微信
					this.wx_bind(info)
			    })
			},
			// 绑定手机号和微信
			wx_bind(info){
				var user_address=uni.getStorageSync("user_address");
			    var params={
					"nickName": info.nickName,
					"phone": this.mobile,
					"avatar": info.avatarUrl,
					"sex": info.gender,
					"unionId": this.unionId,
					"openId": this.openId,
					"bindType": "1",
					"thirdAppId": api.data.appId,
					"province": user_address?user_address.province:'',
					"city": user_address?user_address.city:'',
					"area": user_address?user_address.district:'',
					"town": user_address?user_address.town:'',
					"address": user_address?user_address.address:''
			    }
			    config.wx_bind(params).then(res=>{
					// console.log(res)
					//
					util.page_show_toast('绑定成功',1500);
					this.bind=true;
			    })
			},
			// 退出登录
			out_login(){
				// config.out_login().then(res=>{
					util.page_show_toast('退出登录成功',1500)
					uni.removeStorageSync('unionId');
					uni.removeStorageSync('userinfo')
					uni.removeStorageSync('token')
					uni.removeStorageSync('login_info')
					uni.removeStorageSync("identityNum")
					uni.removeStorageSync("userIdentity")
					setTimeout(function(){
						uni.redirectTo({
						    url: '/pages/login/login'
						});
					},1500)
				// })
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F7F9FB;
		.page_cont{
			padding: 32rpx;
			.set_list{
				padding: 0 32rpx;
				background: #fff;
				border-radius: 16rpx;
				.set_item{
					padding: 36rpx 0;
					border-bottom: 2rpx solid #F7F9FB;
					display: flex;
					flex-direction: row;
					align-items: center;
					&:last-child{
						border-bottom: 0;
					}
					.title{
						height: 42rpx;
						font-size: 30rpx;
						font-weight:400;
						line-height: 42rpx;
						color:rgba(66,71,82,1);
						text-align: left;
					}
					.text{
						flex: 1;
						height: 42rpx;
						font-size: 30rpx;
						font-weight:400;
						line-height: 42rpx;
						text-align: right;
						margin: 0 24rpx;
					}
					.icon{
						width: 24rpx;
						height: 24rpx;
					}
					.btn{
						flex: 1;
						height: 42rpx;
						line-height: 42rpx;
						font-size: 30rpx;
						padding: 0;
						margin: 0 24rpx;
						width: 100%;
						text-align: right;
						outline: 0;
						background: transparent;
						color: #5B90FF;
						&::after{
							border: 0;
						}
					}
				}
			}
			.off_btn{
				position: fixed;
				bottom: 32rpx;
				left: 0;
				width: 686rpx;
				margin: 0 32rpx;
				text-align: center;
				height:88rpx;
				line-height: 88rpx;
				border: 2rpx solid #5B90FF;
				border-radius: 16rpx;
				font-size: 36rpx;
				font-weight:400;
				color: #5B90FF;
			}
			.page_con{
				position: fixed;
				bottom:-100%;
				left: 0;
				width: 100%;
				background: #fff;
				transition: all 0.4s;
				z-index:9998;
				box-sizing: border-box;
				border-radius: 32rpx 32rpx 0 0;
				.close_wrap{
					width: 72rpx;
					height: 72rpx;
					margin: auto;
					.icon{
						width: 100%;
						height: 100%;
					}
				}
				.page{
					padding: 24rpx 32rpx 48rpx 32rpx;
					.title{
						text-align: center;
						font-size:36rpx;
						font-weight:600;
						line-height:50rpx;
						color:rgba(66,71,82,1);
						padding: 0 56rpx;
					}
					.confirm_btn{
						height: 88rpx;
						line-height: 88rpx;
						border-radius: 16rpx;
						text-align: center;
						color: #fff;
						font-size:36rpx;
						font-weight:600;
						letter-spacing:20rpx;
						background: #5B90FF;
						margin: 48rpx 0;
					}
					.cancel_btn{
						height: 88rpx;
						line-height: 88rpx;
						border-radius: 16rpx;
						text-align: center;
						color: #9598A3;
						font-size:36rpx;
						font-weight:400;
						letter-spacing:20rpx;
						border:1px solid rgba(149,152,163,0.5);
						box-sizing: border-box;
					}
				}
			}
			.active{
				bottom: 0;
			}
		}
		.pop {
			width: 500rpx;
			/* #ifdef MP-WEIXIN || APP-PLUS */
			margin: 360rpx auto 0 auto;
			/* #endif */
			/* #ifdef H5 */
			margin: 500rpx auto 0 auto;
			/* #endif */
			background: #fff;
			border-radius: 16rpx;
			padding: 76rpx 48rpx 52rpx 48rpx;
		
			.point {
				text-align: center;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #3F4A58;
				margin-bottom: 64rpx;
			}
		
			.btn_wrap_confirm {
				width: 100%;
				display: flex;
				flex-direction: row;
		
				.btn {
					flex: 1;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 30rpx;
					font-weight: 400;
					border-radius: 16rpx;
		
					&:first-child {
						background: rgba(146, 155, 167, 0.15);
						color: #798594;
						margin-right: 38rpx;
					}
		
					&:last-child {
						background: #5B90FF;
						color: #fff;
					}
				}
			}
		}
	}
</style>
